import React, { useState, useEffect } from 'react'
import { Tree } from 'antd'
import { treeData } from './tree'
const App = () => {
  const [treeList, setTreeList] = useState<any>([])
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
    '0-0-0',
    '0-0-1'
  ])
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0-0'])
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true)

  useEffect(() => {
    // console.log('treeData:', treeData)
    const arr = forTitleAddCount(treeData)
    console.log('arr:', arr)
    setTreeList([...treeData])
  }, [])

  const forTitleAddCount = (treeData: any[]) => {
    treeData.forEach((item) => {
      if (item.children && Array.isArray(item.children)) {
        item.title = item.title + '(2)'
        forTitleAddCount(item.children)
      } else {
        console.log('item:', item.title)
        item.title = item.title + '(1)'
      }
    })
    return treeData
  }

  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue)
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue)
    setAutoExpandParent(false)
  }

  const onCheck = (checkedKeysValue: any) => {
    console.log('onCheck', checkedKeysValue)
    setCheckedKeys(checkedKeysValue)
  }

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info)
    setSelectedKeys(selectedKeysValue)
  }

  return (
    <Tree
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={treeList}
    />
  )
}

export default App
